import { StyleSheet, Text, View, Image } from 'react-native'
import React from 'react'
// import { avatarUri } from '@/constants/Uri';

type Props = {
  info: UserInfo
}
// 14-1memo与性能优化函数式组件和class组件拦截多余渲染
const InfoView = function (props: Props) {
  const { info } = props
  console.log('func com render ...')

  return (
    <View style={darkStyles.content}>
      <Image
        style={darkStyles.img}
        source={{ uri: info.avatar || undefined }}
      />
      <Text style={darkStyles.txt}>{info.name}</Text>
      <View style={darkStyles.infoLayout}>
        <Text style={darkStyles.infoTxt}>{info.desc}</Text>
      </View>
    </View>
  )
}
export default InfoView  // 这里会不断触发render，React.memo + 判断即可解决 ; 如下

// export default React.memo(InfoView, (preProps: Props, nextProps: Props) => {
//   // true: 代表不重新渲染，false：需要渲染
//   return JSON.stringify(preProps.info) === JSON.stringify(nextProps.info)
// })
const darkStyles = StyleSheet.create({
  content: {
    width: '100%',
    height: 350,
    backgroundColor: '#353535',
    flexDirection: 'column',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingTop: 20
  },
  img: {
    width: 96,
    height: 96,
    borderRadius: 48,
    borderWidth: 4,
    borderColor: '#ffffffE0'
  },
  txt: {
    fontSize: 24,
    color: 'white',
    fontWeight: 'bold',
    marginTop: 32
  },
  infoLayout: {
    width: '90%',
    padding: 16,
    backgroundColor: '#808080',
    borderRadius: 12,
    marginTop: 24
  },
  infoTxt: {
    fontSize: 16,
    color: 'white'
  },
})
